<template>
  <div class="content" v-loading="submitBtn || loading">
    <div class="scroll-view-box">
      <div class="user-title-box">基础信息</div>
      <el-form label-width="120px" :inline="true" :model="formData" :rules="formRules" ref="elFrom"
        label-position="top">
        <el-form-item label="品牌名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入品牌名称" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="品牌缩写" prop="abbreviation">
          <el-input v-model="formData.abbreviation" placeholder="请输入品牌缩写" clearable class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="品牌颜色" prop="colour">
          <el-color-picker v-model="formData.colour"></el-color-picker>
        </el-form-item>
        <el-form-item label="品牌说明">
          <el-input v-model="formData.desc" type="textarea" placeholder="请输入品牌说明(非必填)" class="input-width"></el-input>
        </el-form-item>
        <div class="user-title-box">关联信息</div>
        <div class="association" v-for="(item, index) in formData.bind_json" :key="index">
          <i class="el-icon-error" v-if="formData.bind_json.length != 1"
            @click="formData.bind_json.splice(index, 1)"></i>
          <el-form-item label="门店类型" required>
            <el-select filterable v-model="item.store_type_id" placeholder="请选择门店类型" clearable class="input-width">
              <el-option v-for="item in storeTypeList" :key="item.id" :label="item.store_type_name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <i class="iconfont icon-relevance"></i>
          <el-form-item label="验收模版" required>
            <el-select filterable v-model="item.template_id" placeholder="请选择验收模版" clearable class="input-width">
              <el-option v-for="item in templateList" :key="item.id" :label="item.template_name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addAssociation">新增关联</el-button>
        <el-button type="primary" @click="saveSubmit" :loading="submitBtn">提交</el-button>
        <el-button @click="cancelFunc">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import brandApi from '@/api/brandApi'
import storeTypeApi from '@/api/storeTypeApi'
import nodesApi from '@/api/nodesApi'

export default {
  name: 'brandAdd',
  data() {
    return {
      loading: true,
      editType: 'add',
      formData: {
        id: '',
        name: '',
        abbreviation: '',
        colour: '',
        desc: '',
        bind_json: [{
          store_type_id: '',
          template_id: ''
        }]
      },
      formRules: {
        name: [{ required: true, message: "请输入品牌名称", trigger: "change" }],
        abbreviation: [{ required: true, message: "请输入品牌缩写", trigger: "change" }],
        colour: [{ required: true, message: "请选择品牌颜色", trigger: "change" }],
      },
      submitBtn: false,
      templateList: [],
      storeTypeList: [],
    };
  },
  computed: {
  },
  mounted() {
    this.getStoreTypeList()
    this.getTemplateList()

    let id = this.$route.query.sn
    if (id) {
      brandApi.getBrandDetail({ brand_id: id }).then(res => {
        console.log(res, '品牌详情')
        if (res.code == 200) {
          let data = res.data
          let formData = this.formData
          let bind_json = []
          res.data.store_list.map(item => {
            bind_json.push({
              store_type_id: item.store_type_id,
              template_id: item.template_id
            })
          })
          formData.id = id
          formData.name = data.name
          formData.abbreviation = data.abbreviation
          formData.colour = data.colour
          formData.bind_json = bind_json
          this.editType = 'update'
        }

        this.loading = false
      })
    }
  },
  methods: {
    addAssociation() {
      this.formData.bind_json.push({
        store_type_id: '',
        template_id: ''
      })
    },
    // 提交
    saveSubmit() {
      this.$refs['elFrom'].validate((valid) => {
        if (valid) {
          let formData = this.formData
          let check = false
          for (let i = 0; i < formData.bind_json.length; i++) {
            let item = formData.bind_json[i]
            if (item.store_type_id == '') {
              check = true
              this.$message.warning('有门店类型未选择，无法提交')
              break;
            }
            if (item.template_id == '') {
              check = true
              this.$message.warning('有验收模版未选择，无法提交')
              break;
            }
          }
          if (check) return
          this.submitBtn = true
          if (this.editType == 'add') {
            brandApi.addBrand({
              name: formData.name,
              desc: formData.desc,
              abbreviation: formData.abbreviation,
              colour: formData.colour,
              bind_json: formData.bind_json
            }).then(res => {
              console.log(res, '新增品牌')
              if (res.code == 200) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.cancelFunc()
              } else {
                this.$message.error(res.message);
              }
              this.submitBtn = false;
            })
          } else {
            brandApi.updBrand({
              brand_id: formData.id,
              name: formData.name,
              desc: formData.desc,
              abbreviation: formData.abbreviation,
              colour: formData.colour,
              bind_json: formData.bind_json
            }).then(res => {
              console.log(res, '更新品牌')
              if (res.code == 200) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.cancelFunc()
              } else {
                this.$message.error(res.message);
              }
              this.submitBtn = false;
            })
          }
        } else {
          this.$message.warning('有必填未填写，无法提交！')
          return false;
        }
      });
    },
    // 取消
    cancelFunc() {
      this.$goBackTab(this);
    },

    // 获取门店类型
    getStoreTypeList() {
      this.loading = true;
      storeTypeApi.getStoreTypeList({
        page: 1,
        num: 999,
      }).then((res) => {
        console.log(res, "获取门店列表");
        this.loading = false;
        if (res.code == 200) {
          this.storeTypeList = res.data.list;
        }
      }).catch((err) => {
        this.$message({
          message: err.message,
          type: "warning",
        });
      });
    },
    // 获取验收模版
    getTemplateList() {
      this.loading = true;
      nodesApi.getTemplateList({
        page: 1,
        num: 999,
      }).then((res) => {
        console.log(res, "获取验收列表");
        this.loading = false;
        if (res.code == 200) {
          this.templateList = res.data.list;
        }
      }).catch((err) => {
        this.$message({
          message: err.message,
          type: "warning",
        });
      });
    }
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import "@/styles/addPage.scss";
</style>